<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            clearable
            placeholder="请输入部门名称"
            prefix-icon="el-icon-search"
            size="small"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            ref="tree"
            :data="deptOptions"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :props="defaultProps"
            default-expand-all
            highlight-current
            node-key="id"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
                 size="small">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              clearable
              placeholder="请输入用户名称"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="挂号级别" prop="userName">
            <el-input
              v-model="queryParams.userName"
              clearable
              placeholder="请输入用户名称"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="filteredUserList">
          <el-table-column key="userId" align="center" label="用户编号" prop="SysUser.userId"/>
          <el-table-column key="userName" :show-overflow-tooltip="true" align="center"
                           label="用户名称"
                           prop="SysUser.userName"/>
          <el-table-column key="deptName" :show-overflow-tooltip="true" align="center"
                           label="部门"
                           prop="SysUser.dept.deptName"/>
          <el-table-column key="phonenumber" align="center" label="手机号码"
                           prop="SysUser.phonenumber" width="120"/>
          <el-table-column key="registLevelId" align="center" label="挂号等级"
                           prop="RegisterLevelId"/>
          <el-table-column
            align="center"
            class-name="small-padding fixed-width"
            label="操作"
            width="160"
          >
            <template v-if="scope.row.userId !== 1" slot-scope="scope">
              <el-button
                v-hasPermi="['system:user:edit']"
                icon="el-icon-edit"
                size="mini"
                type="text"
                @click="handleRegister(scope.row)"
              >挂号
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :limit.sync="queryParams.size"
          :page.sync="queryParams.current"
          :total="total"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {deptTreeSelect, listUser} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "RegisterService",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: {Treeselect},
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      userList: null,
      deptOptions: undefined,
      deptName: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        userName: undefined,
        registLevelId: undefined,
        deptId: undefined
      },
    };
  },
  computed: {
    filteredUserList() {
      let list = [];
      for (let userListKey in this.userList) {
        if (this.userList[userListKey].SysUser.registLevelId !== 3) {
          list.push(this.userList[userListKey]);
        }
      }
      return list;
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  methods: {
    handleRegister(row) {
      this.$confirm(`确定挂号对象为${row.SysUser.userName}医生吗?`)
        .then(() => {
          this.$router.push({
            path: '/registered/info',
            query: {
              userId: row.SysUser.userId,
              deptId: row.SysUser.deptId,
              registLevel: row.RegisterLevelId,
              registLevelId: row.SysUser.registLevelId,
            }
          })
        })
    },
    getList() {
      this.loading = true;
      listUser(this.queryParams).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.userName = undefined;
      this.queryParams.deptId = undefined;
      this.queryParams.registLevelId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
  }
};
</script>
